<template>
    <div class="chart-box">
        <div class="chart-name">
            <div class="ctrl">
                <slot name="ctrl"></slot>
            </div>
            <slot name="name"></slot>
        </div>
        <div class="chart">
            <slot name="chart"></slot>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.chart-box {
    height:100%; 
    background:rgba(0, 0, 0, 0.2);
    padding-top:40px;
    position: relative;
    .chart-name {
        height:40px;
        border-bottom:1px solid #535bf2;
        position: absolute;
        width:100%;
        top:0;
        left:0;
        line-height: 38px;
        padding:0 10px;
        .ctrl {
            float:right;
        }
    }
    .chart {
        height:100%;
        padding:10px;
    }
}
    
</style>